<!--tab切换页面-->
<template>
  <div class="app-container">
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="待排" name="first">
      <template>
        <div class="app-container">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="状态" prop="state">
              <el-select v-model="queryParams.state" placeholder="请选择状态" clearable size="small">
                <el-option
                  v-for="dict in stateOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="桌号" prop="deskNumber">
              <el-select v-model="queryParams.deskNumber" placeholder="请选择桌号" clearable size="small">
                <el-option
                  v-for="dict in zlChooseList"
                  :key="dict.id"
                  :label="dict.tablenumberId"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="memberName">
              <el-input
                v-model="queryParams.memberName"
                placeholder="请输入姓名"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['mahjong:pool:add']"
              >新增
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['mahjong:pool:edit']"
              >修改
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['mahjong:pool:remove']"
              >删除
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleLoad"
                v-hasPermi="['mahjong:pool:remove']"
              >加载预约
              </el-button>
            </el-col>
       <!--
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="topchengjuForm"
                  v-hasPermi="['mahjong:pool:remove']"
                >成局
                </el-button>
            </el-col>-->
            <!-- <el-col :span="1.5">
               <el-button
                 type="warning"
                 icon="el-icon-download"
                 size="mini"
                 @click="handleExport"
                 v-hasPermi="['mahjong:pool:export']"
               >导出</el-button>
             </el-col>-->
          </el-row>

          <el-table v-loading="loading" :data="poolList"  border :row-class-name="tableRowClassName"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="状态" align="center" prop="state" :formatter="stateFormat"/>
            <el-table-column label="预约类型" align="center" prop="mode" :formatter="modeFormat"  />
            <el-table-column label="预约积分" align="center" prop="integral" :formatter="jfFormat" />
            <el-table-column label="会员" align="center" prop="memberName"/>
            <el-table-column label="不同桌" align="center" prop="different"/>
            <el-table-column label="车程" align="center" prop="drivingDistance"/>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="普麻积分" align="center" prop="ordinaryMahjong" :formatter="ordinaryMahjongFormat" />
            <el-table-column label="桌号" align="center" prop="deskNumber" :formatter="zhFormat"/>

            <!-- <el-table-column label="手机号" align="center" prop="memberPhone"/>-->


<!--            <el-table-column label="将数" align="center" prop="count"/>-->
            <el-table-column label="预约时间" align="center" prop="reservationTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.reservationTime) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope"  >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['mahjong:pool:edit']"
                >修改
                </el-button>
<!--                <el-button-->
<!--                  v-if="scope.row.deskNumber==undefined"-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-s-shop"-->
<!--                  @click="handleLoad(scope.row)"-->
<!--                  v-hasPermi="['mahjong:pool:remove']"-->
<!--                >自动配桌-->
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-s-custom"
                    @click="myhand(scope.row);loadintegral('common');"
                    v-hasPermi="['mahjong:pool:remove']"
                  >自动配桌
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-s-custom"
                  @click="hand(scope.row)"
                  v-hasPermi="['mahjong:pool:remove']"
                >手动配桌
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

          <!-- 添加或修改陪桌数据池对话框 -->
          <el-dialog :title="title" :visible.sync="open" width="500px">

            <el-form ref="form" :model="form" :rules="rules" label-width="110px">
              <el-form-item label="昵称" prop="memberName">
                <el-select v-model="form.memberId" filterable placeholder="请选择姓名" no-match-text="无信息，请先维护会员信息">
                  <el-option
                    v-for="item in allMember"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
<!--              <el-form-item label="将数" prop="count">-->
<!--                <el-input v-model="form.count" type="number" min="0" placeholder="请输入将数"/>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="模式">-->
<!--                <el-select v-model="form.mode" placeholder="请选择模式"  @change="loadintegral">-->
<!--                  <el-option-->
<!--                    v-for="dict in typeOptions"-->
<!--                    :key="dict.dictValue"-->
<!--                    :label="dict.dictLabel"-->
<!--                    :value="dict.dictValue"-->
<!--                  ></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item label="模式" >
                <el-select v-model="form.bak3" placeholder="请选择模式"  @change="loadintegral" >
                  <el-option
                    v-for="dict in typeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
                <el-form-item label="积分" >
                <el-select v-model="form.bak2" multiple  placeholder="请选择积分">
                  <el-option
                    v-for="dict in integralOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
<!--              <el-form-item label="预约积分" prop="count">-->
<!--                <el-input v-model="form.count" type="number" min="0" placeholder="请输入预约积分"/>-->
<!--              </el-form-item>-->
              <el-form-item label="状态">
                <el-select v-model="form.state" placeholder="请选择状态">
                  <el-option
                    v-for="dict in stateOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="桌号" prop="deskNumber">
                <el-select v-model="form.deskNumber"  placeholder="请选择桌号">
                  <el-option
                    v-for="dict in zlChooseList"
                    :key="dict.id"
                    :label="dict.tablenumberId"
                    :value="dict.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="预约时间" prop="reservationTime">
                <el-date-picker
                  v-model="form.bak1"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
<!--              <el-form-item label="预约时间" prop="reservationTime">-->
<!--                <el-select v-model="form.deskNumber"  placeholder="请选择预约时间">-->
<!--                  <template slot-scope="scope">-->
<!--                    <span>{{ parseTime(scope.row.reservationTime) }}</span>-->
<!--                  </template>-->
<!--                </el-select>-->
<!--              </el-form-item>-->


<!--              <el-table-column label="成局时间" align="center" prop="time">-->
<!--                <template slot-scope="scope">-->
<!--                  <span>{{ parseTime(scope.row.time) }}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-form-item label="预约时间" prop="count">-->
<!--                <el-input v-model="form.updatetime" type="datetime"  placeholder="请输入时间"/>-->
<!--                <template slot-scope="scope">-->
<!--                  <span>{{ parseTime(scope.row.datetime) }}</span>-->
<!--                </template>-->
<!--              </el-form-item>-->
              <el-form-item label="备注" prop="count">
                <el-input v-model="form.remark" type="textarea"  placeholder="请输入备注"/>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>

          <!--手动陪桌弹框-->

          <el-dialog :title="title2" :visible.sync="openhand" width="1200px">
            <template>
              <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-form-item label="桌号" prop="myDeskNumber">
                  <el-select v-model="queryParams.myDeskNumber" placeholder="请选择桌号" clearable size="small"
                             @change="handselect">
                    <el-option
                      v-for="dict in zlChooseList"
                      :key="dict.id"
                      :label="dict.tablenumberId"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item name="1">
                  <template slot="title">
                    配桌人员信息<i class="header-icon el-icon-bottom"></i>
                  </template>
                  <el-table v-loading="loading" :data="memberList" :row-class-name="newtableRowClassName"
                            @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"/>
                    <el-table-column label="预约类型" align="center" prop="mode" :formatter="modeFormat"/>
                    <el-table-column label="预约积分" align="center" prop="integral" :formatter="jfFormat"/>
                    <el-table-column label="会员" align="center" prop="name"/>
                    <el-table-column label="不同桌" align="center" prop="different" :formatter="gzFormat"/>
                    <el-table-column label="车程" align="center" prop="drivingDistance"/>
                    <el-table-column label="喜好" align="center" prop="likes" :formatter="likesFormat"/>
                    <el-table-column label="忌讳" align="center" prop="custom" :formatter="customFormat"/>

<!--                    <el-table-column label="自定义模式" align="center" prop="customMahjong"-->
<!--                                     :formatter="customMahjongFormat"/>-->
<!--                    <el-table-column label="美国麻将模式" align="center" prop="americanMahjong"-->
<!--                                     :formatter="americanMahjongFormat"/>-->
<!--                    <el-table-column label="普通麻将模式" align="center" prop="ordinaryMahjong"-->
<!--                                     :formatter="ordinaryMahjongFormat"/>-->
<!--                    <el-table-column label="比赛麻将模式" align="center" prop="matchMahjong" :formatter="matchMahjongFormat"/>-->
                    <el-table-column label="可安排时间" align="center" prop="playingTime" :formatter="playingTimeFormat"/>
                    <el-table-column label="备注" align="center" prop="remark"/>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
              <el-divider content-position="center"> 配桌信息维护</el-divider>
              <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="将数"  prop="integral">
                  <el-input v-model="form.count"  placeholder="请输入将数" style="width: 20%"/>
                  积分卡
                  <el-select v-model="form.size" placeholder="请选择积分卡">
                    <el-option
                      v-for="dict in sizeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="模式">
                  <el-select v-model="form.mode" value="" placeholder="请选择模式"  @change="loadintegral">
                    <el-option
                      v-for="dict in typeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                  积分
                  <el-select v-model="form.integral" placeholder="请选择积分">
                    <el-option
                      v-for="dict in integralOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="成局时间" prop="time">
                  <el-date-picker clearable size="small" style="width: 200px"
                                  v-model="form.time"
                                  type="datetime"
                                  placeholder="选择预定成局时间">
                  </el-date-picker>
                   来源
                  <el-select v-model="form.source" placeholder="请选择来源">
                    <el-option
                      v-for="dict in sourceOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="bak1">
                  <el-input v-model="form.remark" type="textarea" style="width: 60%" placeholder="请输入备注"/>
                </el-form-item>
              </el-form>
            </template>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitDeskForm">信息保存</el-button>
              <el-button type="primary" @click="matchingForm">配 桌</el-button>
              <el-button type="primary" @click="chengjuForm">成 局</el-button>
              <el-button @click="canceldesk">取 消</el-button>
            </div>
          </el-dialog>

          <!--手动陪桌弹框结束-->
        </div>
      </template>
    </el-tab-pane>

    <el-tab-pane label="已成局" name="second">
      <template>
        <div class="app-container">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="桌号" align="center" prop="deskId" :formatter="chengjugzFormat"/>
            <el-table-column label="1号人员" align="center" prop="oneName"/>
            <el-table-column label="2号人员" align="center" prop="twoName"/>
            <el-table-column label="3号人员" align="center" prop="threeName"/>
            <el-table-column label="4号人员" align="center" prop="fourName"/>
            <el-table-column label="将数" align="center" prop="count"/>
            <el-table-column label="积分" align="center" prop="integral" :formatter="jfFormat"/>
            <el-table-column label="模式" align="center" prop="mode" :formatter="modeFormat"/>
            <el-table-column label="积分卡号大小" align="center" prop="size" :formatter="sizeFormat"/>
            <el-table-column label="成局时间" align="center" prop="time">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.time) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="来源" align="center" prop="source" :formatter="sourceFormat"/>
            <el-table-column label="备注" align="center" prop="remark"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="start(scope.row)"
                  v-hasPermi="['mahjong:pool:edit']"
                >开始
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="endRollback(scope.row)"
                >撤回
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-tab-pane>
    <el-tab-pane label="已开始" name="third">
      <template>
        <div class="app-container">
          <el-table :data="startData" border style="width: 100%" @cell-click="cellHandleclick">
            <el-table-column label="桌号" align="center" prop="deskId" :formatter="chengjugzFormat" />
            <el-table-column label="1号人员" align="center" prop="oneName">
              <template slot-scope="scope">
                <el-link type="primary">{{scope.row.oneName }}</el-link>
              </template>

            </el-table-column>
            <el-table-column label="2号人员" align="center" prop="twoName">
              <template slot-scope="scope">
                <el-link type="primary">{{scope.row.twoName }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="3号人员" align="center" prop="threeName">
              <template slot-scope="scope">
                <el-link type="primary">{{scope.row.threeName }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="4号人员" align="center" prop="fourName">

              <template slot-scope="scope">
                <el-link type="primary">{{scope.row.fourName }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="将数" align="center" prop="count"/>
            <el-table-column label="积分" align="center" prop="integral" :formatter="jfFormat" />
            <el-table-column label="模式" align="center" prop="mode" :formatter="typesFormat" />
            <el-table-column label="积分卡号大小" align="center" prop="size" :formatter="sizeFormat"/>
            <el-table-column label="持续时间" align="center" prop="duration" />
            <el-table-column label="开始时间" align="center" prop="time">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.time) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="来源" align="center" prop="source" :formatter="sourceFormat"/>
            <el-table-column label="备注" align="center" prop="remark"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="editstart(scope.row)"
                  v-hasPermi="['mahjong:pool:edit']"
                >修改
                </el-button>
                <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="editState(scope.row)"
                v-hasPermi="['mahjong:pool:edit']"
                >状态维护
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 添加或修改陪桌数据池对话框 -->
        <el-dialog title="修改配桌信息" :visible.sync="startopen" width="500px">

          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="将数" prop="count">
              <el-input v-model="form.count" t placeholder="请输入将数"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateStartForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 添加或修改陪桌数据池对话框 -->
        <el-dialog title="消费信息" :visible.sync="commodityopen" width="500px">

          <el-form ref="form" :model="myform" :rules="rulescommity" label-width="80px">
            <el-form-item label="商品名称" prop="count">
              <el-select v-model="myform.type"  filterable  placeholder="请选择商品名称" @change="getPrice">
                <el-option
                  v-for="dict in commodityList"
                  :key="dict.id"
                  :label="dict.commodityName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="myform.price" placeholder="请输入价格" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="insertOrdertForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <!-- 添加或修改会员状态 -->
        <el-dialog title="状态维护" :visible.sync="memberStateopen" width="500px">

          <el-table :data="deskMemberList" border style="width: 100%">
            <el-table-column label="桌号" align="center" prop="deskId" :formatter="chengjugzFormat" />
            <el-table-column label="会员姓名" align="center" prop="memberName"/>
            <el-table-column label="状态" align="center" prop="state" >
             <template slot-scope="scope">
                <el-select v-model="scope.row.state" placeholder="请选择状态" @change="memberState(scope.row)">
                  <el-option
                    v-for="dict in mathOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>

          </el-table>
          <div>
            <el-tag type="danger" style="text-align: left;margin-top: 10px">本桌持续时间：{{durationTime}}</el-tag>

          </div>
          <div slot="footer" class="dialog-footer">

            <el-button type="primary" @click="goFinish">结 束</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </template>
    </el-tab-pane>
    <el-tab-pane label="已结束" name="fourth">
      <template>
        <div class="app-container">
          <el-table :data="finshData" border style="width: 100%" @cell-click="cellHandleclick">
            <el-table-column label="桌号" align="center" prop="deskId" :formatter="chengjugzFormat" />
            <el-table-column label="1号人员" align="center" prop="oneName"/>
            <el-table-column label="2号人员" align="center" prop="twoName"/>
            <el-table-column label="3号人员" align="center" prop="threeName"/>
            <el-table-column label="4号人员" align="center" prop="fourName"/>
            <el-table-column label="将数" align="center" prop="count"/>
            <el-table-column label="积分" align="center" prop="integral" :formatter="jfFormat"/>
            <el-table-column label="模式" align="center" prop="mode" :formatter="modeFormat"/>
            <el-table-column label="积分卡大小" align="center" prop="size" :formatter="sizeFormat"/>
            <el-table-column label="成局时间" align="center" prop="time">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.time) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="来源" align="center" prop="source" :formatter="sourceFormat"/>
            <el-table-column label="操作人" align="center" prop="updateBy" />
            <el-table-column label="备注" align="center" prop="remark"/>
          </el-table>

        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </el-tab-pane>

  </el-tabs>
  </div>
</template>
<script>
  import {
    listPool,
    getPool,
    delPool,
    loadupdatePool,
    addPool,
    updatePool,
    exportPool,
    selectdetails,
    myselectdetails,
    matchdesk,
    chengjuList,
    topchengju,
    chengju
  } from "@/api/mahjong/pool";
  import {listalluser, getzi,getchoosezi} from "@/api/mahjong/member";
  import {handlerdata, handlergzdata} from "@/api/mahjong/utils";
  import {listDesking, getDesking, delDesking, addDesking, updateDesking, exportDesking,goStart,getStartList,finishList,deskMemberList,goFinish,endRollback} from "@/api/mahjong/desking";
  import { listallCommodity } from "@/api/mahjong/commodity";
  import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder } from "@/api/mahjong/order";
  import { listDeskmember, getDeskmember, delDeskmember, addDeskmember, updateDeskmember, exportDeskmember } from "@/api/mahjong/deskmember";
  import {delTablenumber} from "../../../api/mahjong/tablenumber";
  import Templatemsg from "@/views/cms/templatemsg";

  export default {
    name: "Pool",
    components: {Templatemsg},
    data() {
      return {
        // 预约麻将类型字典
        typeOptions: [],
        title2:'',
        // 遮罩层
        loading: true,
        isdisabled:false,
        commodityopen:false,
        memberStateopen:false,
        durationTime:'',
        rowId: '',
        deskId: '',
        activeNames: ['1'],
        activeName: 'first',
        memberList: [],
        detailsData: '',
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 陪桌数据池表格数据
        poolList: [],
        // 弹出层标题
        title: "",
        size: '',
        // 是否显示弹出层
        open: false,
        openhand: false,
        startopen:false,
        // 状态字典
        stateOptions: [],
        // 模式字典
        modeOptions: [],
        // 大小字典
        sizeOptions: [],
        // 来源字典
        sourceOptions: [],
        countOptions:[],
        zlList: [],
        zlChooseList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: undefined,
          bak3: undefined,
          bak2: undefined,
          bak1: undefined,
          state: undefined,
          deskNumber: undefined,
          count: undefined,
          memberName: undefined,
          memberId: undefined,
        },
        // 表单参数
        form: {},
        myform: {},
        // 表单校验
        rules: {},
        rulescommity:{
          type: [
            { required: true, message: "商品不能为空", trigger: "blur" }
          ],
          price: [
            { required: true, message: "价格不能为空", trigger: "blur" }
          ],
        },
        tableData: [],
        startData:[],
        commodityList:[],
        finshData:[],
        deskMemberList:[],
        mathOptions:[],
        allMember:[],
        restaurants: [],
        integralOptions:[],
        majongmodeOptions:[]
      };
    },
    created() {
      this.resetQuery();
      //待排列表
      this.getList();
      //麻将类型数据字典
      this.getDicts("majong_type").then(response => {
        this.typeOptions = response.data;
      });
      //开桌人员状态数据字典
      this.getDicts("person_state").then(response => {
        this.stateOptions = response.data;
      });
      //开桌人员状态数据字典
      this.getDicts("count").then(response => {
        this.countOptions = response.data;
      });
      //将数(遗弃的字典)
      this.getDicts("count").then(response => {
        this.counOptions = response.data;
      });
      //获取桌面信息
      this.getzi();

      //获取选取桌面信息
      this.getchoosezi();
      //开桌模式字段
      this.getDicts("open_model").then(response => {
        this.modeOptions = response.data;
      });

      //开桌大小大小
      this.getDicts("open_size").then(response => {
        this.sizeOptions = response.data;
      });
      //客人来源
      this.getDicts("source").then(response => {
        this.sourceOptions = response.data;
      });
      //会员喜欢标签http://localhost:9527/

      this.getDicts("like").then(response => {
        this.likesOptions = response.data;
      });
      //会员不喜欢标签
      this.getDicts("nolike").then(response => {
        this.tabooOptions = response.data;
      });
      //会员自定义欢标签
      this.getDicts("custom").then(response => {
        this.customOptions = response.data;
      });
      //美国麻将积分模式标签
      this.getDicts("america").then(response => {
        this.americanMahjongOptions = response.data;
      });
      //普通麻将积分模式式标签
      this.getDicts("common").then(response => {
        this.ordinaryMahjongOptions = response.data;
      });
      //比赛麻将积分模式
      this.getDicts("competition").then(response => {
        this.matchMahjongOptions = response.data;
      });
      //自定义积分模式
      this.getDicts("custom_integral").then(response => {
        this.customMahjongOptions = response.data;
      });
      //打牌时间
      this.getDicts("playing_time").then(response => {
        this.playingTimeOptions = response.data;
      });
      //配桌人员状态
      this.getDicts("math_state").then(response => {
        this.mathOptions = response.data;
      });
      //获取商品信息
      this.getCommodity();
      //获取会员列表信息
      this.getallList();
    },
    methods: {
       /************************************ 待排模功能列表开始***********************************************/

       loadintegral(e){

         this.getDicts(e).then(response => {
           this.integralOptions = response.data;
         });
       },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 查询陪桌待排列表 */
      getList() {
        this.loading = true;
        listPool(this.queryParams).then(response => {
          this.poolList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.isDisabled=false;
        this.title = "添加配桌数据池";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.isDisabled=true;
        const id = row.id || this.ids
        getPool(id).then(response => {
          this.form = response.data;
          this.form.bak2=this.coverList(this.form.bak2);
          this.open = true;
          this.title = "修改配桌数据池";
        });
      },
      coverList(e){
        if(e){
          return e.split(",");
        }
        return e
      },
      handleDelete(row){
        const ids = row.id || this.ids;
        this.$confirm('是否确认所选择的数据吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delPool(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      /** 保存配桌数据*/
      submitDeskForm: function () {
        updateDesking(this.form).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
          } else {
            this.msgError(response.msg);
          }
        });
      },
      /** 加载预约按钮 */
      handleLoad() {
        loadupdatePool().then(response => {
          if (response.code === 200) {
            this.msgSuccess("加载完毕");

            this.getList();
          } else {
            this.msgError(response.msg);
          }
        });
      },
      /** 手动配桌 */
      hand(row) {
        this.title2="手动配桌"
        this.rowId = row.id;
        var param = {
          id: row.id,
          deskId: undefined
        }
        selectdetails(param).then(response => {
          if (response.code === 200) {
            this.openhand = true;
            this.memberList = response.data.details
            this.size = this.memberList.length;
            // this.form=response.data.detailsData
          } else {
            this.msgError(response.msg);
          }
        });

      },
      /** 自动配桌 向后端发送当前用户的信息，后端根据信息对桌子人数、喜欢、忌讳进行匹配返回数据*/
      myhand(row) {
        this.title2="自动配桌"
        this.rowId = row.id;
        var param = {
          id: row.id,
          deskId: undefined
        }
        myselectdetails(param).then(response => {
          if (response.code === 200) {
            var param = {
              id: row.id,
              deskId: response.data,
              source: response.data,
              count: response.data,
              mode: response.data
            }
            this.queryParams.myDeskNumber=response.data
            selectdetails(param).then(response => {
              if (response.code === 200) {
                this.openhand = true;

                this.memberList = response.data.details
                this.size = this.memberList.length;
                if (response.data.desk) {
                  this.form = response.data.desk
                }

              } else {
                this.msgError(response.msg);
              }
            });
            // this.form=response.data.detailsData
          } else {
            this.msgError(response.msg);
          }
        });

      },
      /** 选择桌号触发事件*/
      handselect(e) {
        this.deskId = e;
        var param = {
          id: this.rowId,
          deskId: this.deskId,
        }
        selectdetails(param).then(response => {
          if (response.code === 200) {
            this.openhand = true;
            this.memberList = response.data.details
            this.size = this.memberList.length;
            if (response.data.desk) {
              this.form = response.data.desk
            }

          } else {
            this.msgError(response.msg);
          }
        });

      },


      /** 人员配桌*/
      matchingForm: function () {
        var param = {
          id: this.rowId,
          deskId: this.deskId,
        }
        matchdesk(param).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.openhand = false;
            this.resetQuery();
            this.$router.go(0)
            this.reset();
            this.getList();
          } else {
            this.msgError(response.msg);
          }
        });
      },
      /** 成局 */
      chengjuForm: function () {

        var param = {
          id: this.rowId,
          deskId: this.form.id,
        }
        if(!this.form.id){
          this.msgError("请选择桌号！");
          return
        }
        if (this.memberList.length != 4) {
          this.msgError("人数不足4人，不允许成局");
          return
        }
       // this.submitDeskForm();

        chengju(param).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.openhand = false;
            this.getList();
            this.$router.go(0)
            this.reset();
            this.resetQuery();
          } else {
            this.msgError(response.msg);
          }
        });
      },
     /*&首页成局入口*/
      topchengjuForm: function () {
        const  ids=this.ids;
        var param = {
          id: this.rowId,
          deskId: this.deskId,
        }
        if (ids.length != 4) {
          this.msgError("人数不足4人，不允许成局");
          return
        }
        topchengju(ids).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.openhand = false;
            this.getList();
            this.$router.go(0)
          } else {
            this.msgError(response.msg);
          }
        });
      },
      getchoosezi(){
        getchoosezi().then(response => {
          this.zlChooseList = response.data;
        });
      },
      /************************************ 待排模功能列表结束***********************************************/
      // 预约麻将类型字典翻译
      typeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.type);
      },
      typesFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.mode);
      },
      handleSelect(item) {
        console.log(item);
      },
      getallList(){
        listalluser().then(response => {
          if (response.code === 200) {
            this.allMember=response.data;
          }
        });
      },
      memberState(row){
       var parm={id:row.id,state:row.state}
        updateDeskmember(parm).then(response => {
          if (response.code === 200) {
          } else {
            this.msgError(response.msg);
          }
        });
      },
      goFinish(){
        goFinish(this.deskId).then(response => {
            if (response.code === 200) {
              this.msgError("本桌已结束");
              this.memberStateopen=false;
              this.getStartList();
              this.$router.go(0)
            } else {
              this.msgError(response.msg);
            }
      });
      },
      editState(e){
        this.deskId=e.id;
        deskMemberList(e.id).then(response => {
          if (response.code === 200) {
            this.deskMemberList=response.data;
            this.memberStateopen=true;
            this.durationTime=e.duration;
          }
        });

      },
      insertOrdertForm(){
          if(!(this.myform.type)||!(this.myform.price)){
            this.msgError("商品价格或者产品为选择");
            return
          }
        addOrder(this.myform).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              this.commodityopen = false;
              this.getStartList();
            } else {
              this.msgError(response.msg);
            }
          });

      },
      getPrice(e){
        for(var prop in this.commodityList) {
          console.log(e);
          console.log(e);
          console.log(prop);
          console.log(prop);
         if(e===this.commodityList[prop].id){
           this.myform.price=this.commodityList[prop].price;
           return
         }
        }
      },
      cellHandleclick(row, column, cell, event) {
        console.log(row);
        console.log(column.label);
        console.log(column);
        console.log(cell);
        console.log(event);
        //如果规定点击某一列执行，利用column中的label属性
        if(column.label === '4号人员') {
          //执行逻辑
          this.myform.settlementId=row.fourId
          this.commodityopen=true;
        }
        if(column.label === '3号人员') {
          //执行逻辑
          this.myform.settlementId=row.threeId
          this.commodityopen=true;
        }
        if(column.label === '2号人员') {
          //执行逻辑
          this.myform.settlementId=row.twoId
          this.commodityopen=true;
        }
        if(column.label === '1号人员') {
          //执行逻辑
          this.myform.settlementId=row.oneId
          this.commodityopen=true;
        }
        this.myform.tableNumber=row.deskId;
      },
      getCommodity(){
        listallCommodity().then(response => {
          if (response.code === 200) {
          this.commodityList=response.data;
          } else {
            this.msgError(response.msg);
          }
        });
      },
      ///更新将数和备注
      updateStartForm(){
        updateDesking(this.form).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.getStartList();
            this.startopen=false;
          } else {
            this.msgError(response.msg);
          }
        });
      },

      canelStart(){
        this.startopen=false;
      },
      start(row) {
        let  that=this
        this.$confirm('是否确认开始进行开桌', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          goStart(row.id).then(response => {
            that.getchengjuList();
          });
        });
      },

      endRollback(row) {
        let  that=this
        this.$confirm('是否确认撤回到已排桌', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          endRollback(row.id).then(response => {
            that.getchengjuList();
          });
        });
      },

      handleChange() {

      },
      sourceFormat(row, column) {
        return this.selectDictLabel(this.sourceOptions, row.source);
      },
      countFormat(row, column) {
        return this.selectDictLabel(this.countOptions, row.count);
      },
      // 大小字典翻译
      sizeFormat(row, column) {
        return this.selectDictLabel(this.sizeOptions, row.size);
      },
      // 模式字典翻译
      modeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.mode);
      },
      // 模式字典翻译
      jfFormat(row, column) {
        console.log(row.mode==='america')
        console.log(row.mode==='common')
        console.log(row.mode==='competition')
        console.log(row.mode==='custom_integral')
        if(row.mode==='america'){

          return handlerdata(row.integral, this.americanMahjongOptions);

        }
        if(row.mode==='common'){
          return handlerdata(row.integral, this.ordinaryMahjongOptions);

        } if(row.mode==='competition'){
          return handlerdata(row.integral, this.matchMahjongOptions);

        }
        if(row.mode==='custom_integral'){
          return handlerdata(row.integral, this.customMahjongOptions);
        }


      },
      // 状态 0正常用户，1非正常用户字典翻译
      likesFormat(row, column) {
        return handlerdata(row.likes, this.likesOptions);
      },
      tabooFormat(row, column) {
        return handlerdata(row.taboo, this.tabooOptions);
      },
      customFormat(row, column) {
        return handlerdata(row.custom, this.customOptions);
      },
      americanMahjongFormat(row, column) {
        return handlerdata(row.americanMahjong, this.americanMahjongOptions);
      },
      ordinaryMahjongFormat(row, column) {
        return handlerdata(row.ordinaryMahjong, this.ordinaryMahjongOptions);
      },
      matchMahjongFormat(row, column) {
        return handlerdata(row.matchMahjong, this.matchMahjongOptions);
      },
      customMahjongFormat(row, column) {
        return handlerdata(row.customMahjong, this.customMahjongOptions);
      },
      playingTimeFormat(row, column) {
        return handlerdata(row.playingTime, this.playingTimeOptions);
      },
    mathFormat(row, column) {
        return this.selectDictLabel(row.state, this.mathOptions);
      },
      gzFormat(row, column) {
        return handlergzdata(row.different, this.zlList);
      },

      tableRowClassName({row, rowIndex}) {
        console.log(row.state);
        if (row.state == '1') {
          return 'warning-row';
        } else if (row.state == '0') {
          return 'kl-row';
        } else if (row.state == '2') {
          return 'success-row';
        }
        return '';
      },
      newtableRowClassName({row, rowIndex}) {
        console.log(rowIndex)
        console.log(this.size - 1)
        if (rowIndex == (this.size - 1)) {
          return 'warning-row';
        }
        return '';
      },
      getzi() {
        getzi().then(response => {
          this.zlList = response.data;
        });
      },
      //切换
      handleClick(tab, event) {
        console.log(tab);
        console.log(tab.index);
        if (tab.index == 1) {
          this.getchengjuList();
        }
        if (tab.index == 2) {
          this.getStartList();
        }
        if (tab.index == 3) {
          this.getFinsihList();
        }
        console.log(event);
      },
      getFinsihList(){

        finishList(this.queryParams).then(response => {
          this.finshData = response.rows;
          this.loading = false;
          this.total = response.total;
          this.loading = false;
        });
      },
      editstart(row){
        this.startopen=true;
        getDesking(row.id).then(response => {
          this.form = response.data;
          this.loading = false;
        });
      },
      /** 成局集合*/
      getchengjuList() {
        this.loading = true;
        chengjuList().then(response => {
          this.tableData = response.data;
          this.loading = false;
        });
      },
      getStartList(){
        this.loading = true;
        getStartList().then(response => {
          this.startData = response.data;
          this.loading = false;
        });
      },

      // 状态字典翻译
      stateFormat(row, column) {
        return this.selectDictLabel(this.stateOptions, row.state);
      },
      zhFormat(row, column) {
        for (var i = 0; i < this.zlList.length; i++) {
          var data = this.zlList[i];
          if (data.id == row.deskNumber) {
            return data.tablenumberId
          }
        }
      },
      chengjugzFormat(row, column) {
        for (var i = 0; i < this.zlList.length; i++) {
          var data = this.zlList[i];
          if (data.id == row.deskId) {
            return data.tablenumberId
          }
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.startopen=false;
        this.commodityopen=false;
        this.memberStateopen=false;
        this.reset();

        this.resetQuery();
      },
      // 表单重置
      reset() {
        this.form = {
          updateTime: undefined,
          updateBy: undefined,
          createTime: undefined,
          createBy: undefined,
          status: "0",
          bak3: undefined,
          bak2: undefined,
          bak1: undefined,
          state: undefined,
          deskNumber: undefined,
          count: undefined,
          memberName: undefined,
          memberId: undefined,
          id: undefined
        };
        this.resetForm("form");
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },

      /** 关闭情况 */
      canceldesk() {
        this.openhand = false;
        this.reset();
      },
      /** 提交按钮 */
      submitForm: function () {

        if(this.form.bak2){
          this.form.bak2=this.form.bak2.join(",");
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updatePool(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addPool(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });

      },





      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有配桌数据池数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportPool(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      }
    }
  };
</script>
<style>
  .el-table .warning-row {
    background: #cae1ff;
  }

  .el-table .kl-row {
    /*background: #00ff00;*/
    background: #ffd966;
  }

  .el-table .success-row {
    background: #bebfc3;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
